<template>
  <div id="div">
    <div id="zhuce">
      <div class="top">
        <span class="iconfont">&#xe6bc;</span>
        <h2>注册</h2>
        <p>
          <span class="iconfont">&#xf0112;</span>
          <i></i>
          <span class="iconfont">&#xe71e;</span>
        </p>
      </div>
    </div>

    <!-- main -->
    <div id="resR">
      <img src="../assets/images/images/logo.jpg" alt="" />
      <input type="text" placeholder="手机号" v-model="user.phone" />
      <input type="text" placeholder="昵称" v-model="user.nickname" />
      <input type="text" placeholder="密码" v-model="user.password" />
      <button type="button" @click="register">立即注册</button>
    </div>
  </div>
</template>

<script>
import { Register } from "../request/api";
//引用node querystring
export default {
  data() {
    return {
      user: {
        phone: "",
        nickname: "",
        password: "",
      },
    };
  },
  methods: {
    //封装登录事件
    register() {
      if (
        this.user.phone == "" ||
        this.user.password == "" ||
        this.user.nickname == ""
      ) {
        alert("输入框不为空");
      } else {
        //调用注册接口
        Register(this.user)
          .then((res) => {
            console.log("注册成功");
            if (res.data.code == 200) {
              //注册成功
              alert("注册成功");
              //注册成功  跳转登录页面
              this.$router.push("/login");
            } else {
              alert(res.data.msg);
            }
          })
          .catch((err) => {
            console.log(err, "500");
          });
      }
    },
  },
};
</script>

<style scoped>
@import '../assets/css/register.css';
</style>
